<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单测试页面</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { padding: 10px; border: 1px solid #ddd; text-align: left; }
        th { background-color: #f2f2f2; }
        .traffic-cell { font-family: monospace; }
        .download { color: green; }
        .upload { color: blue; }
        .duration-cell { color: #666; }
        .time-cell { color: #999; }
    </style>
</head>
<body>
    <h1>简单测试页面</h1>
    <button onclick="loadData()">加载数据</button>
    
    <table id="data-table">
        <thead>
            <tr>
                <th>用户名</th>
                <th>虚拟地址</th>
                <th>接收流量</th>
                <th>发送流量</th>
                <th>在线时长</th>
                <th>连接开始时间</th>
                <th>最后更新</th>
            </tr>
        </thead>
        <tbody id="table-body">
            <tr><td colspan="7">点击"加载数据"按钮</td></tr>
        </tbody>
    </table>

    <script>
        async function loadData() {
            try {
                const response = await fetch('/api/online-users');
                const users = await response.json();
                
                let html = '';
                users.forEach(user => {
                    const connectedTime = user.connected_since ? new Date(user.connected_since).toLocaleString('zh-CN') : '未知';
                    const lastUpdated = user.last_updated ? new Date(user.last_updated).toLocaleString('zh-CN') : '未知';
                    
                    html += `
                        <tr>
                            <td>${user.username}</td>
                            <td>${user.virtual_address}</td>
                            <td class="traffic-cell download">${user.traffic_received}</td>
                            <td class="traffic-cell upload">${user.traffic_sent}</td>
                            <td class="duration-cell">${user.duration}</td>
                            <td class="time-cell">${connectedTime}</td>
                            <td class="time-cell">${lastUpdated}</td>
                        </tr>
                    `;
                });
                
                document.getElementById('table-body').innerHTML = html;
                
            } catch (error) {
                console.error('加载失败:', error);
                document.getElementById('table-body').innerHTML = '<tr><td colspan="7" style="color: red;">加载失败</td></tr>';
            }
        }
        
        // 页面加载时自动加载数据
        window.addEventListener('load', () => {
            setTimeout(loadData, 1000);
        });
    </script>
</body>
</html> 